<template>
    <div id="merchantsSettledDiv">
        <Row>
            <div class="ws-form-header clearfix">
                <div style="font-size: 25px;text-align: center;margin-bottom: 10px;">华龄·金管家商城入驻申请</div>
                <!-- 申请表单 -->
                <div class="ws-status-box">
                    <div class="ws-form-status">
                        <span>申请状态：</span><span>{{checkStatus(applyForm.status)}}</span>
                    </div>
                    <div class="ws-form-status" v-show="applyForm.status == 2">
                        您可以修改后重新提交申请 <a href="javascript:void(0)" @click="checkReason" class="link-reason">查看原因</a>
                    </div>
                </div>
            </div>
            <Col span="24">
            <row>
                <Form ref="applyForm" :model="applyForm" :rules="rules" :label-width="120">
                    <Col span="24" class="ws-form-category">
                    <span style="font-size: 20px;">基本信息</span>
                    </Col>
                    <Col span="12">
                    <FormItem label="手机号" prop="telephone">
                        <Input disabled v-model="applyForm.telephone" class="ws-form-select"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="申请人" prop="linkman">
                        <Input v-model="applyForm.linkman" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="身份证" prop="idNumber">
                        <Input v-model="applyForm.idNumber" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="邮箱" prop="email">
                        <Input v-model="applyForm.email" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="入驻类型" prop="type">
                            <Select clearable v-model="applyForm.type" placeholder="请选择">
                                <Option value=1>商户入驻</Option>
                                <Option value=2>个人入驻</Option>
                            </Select>
                        </FormItem>
                    </Col></br>
                    <div v-if="applyForm.type == 1">
                        <Col span="24" class="ws-form-category">
                            <span style="font-size: 20px;">公司信息</span>
                        </Col>
                        <Col span="12">
                            <FormItem label="公司名称">
                                <Input v-model="applyForm.company" class="ws-form-select" :disabled="disabled"></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="信用代码证号">
                                <Input v-model="applyForm.creditNumber" class="ws-form-select" :disabled="disabled"></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="营业执照有效期" prop="licenseExpiryDate">
                                <DatePicker :options="licenseExpiryDate" placement="top" type="date" placeholder="选择日期" v-model="applyForm.licenseExpiryDate" class="ws-form-select" :disabled="disabled"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="营业执照照片">
                                <!-- <Input v-model="applyForm.licenseId" class="ws-form-select"></Input> -->
                                <div class="demo-upload-list" v-if="applyForm.licenseId">
                                    <template>
                                        <img :src="'/ws/img/view/'+applyForm.licenseId">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="handleRemove(applyForm.licenseId)"></Icon>
                                        </div>
                                    </template>
                                </div>
                                <Upload v-show="!applyForm.licenseId" ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="/ws/batch/upload" style="display: inline-block;width:100px;">
                                    <div style="width: 100px;height:100px;line-height: 100px;">
                                        <Icon type="camera" size="40"></Icon>
                                    </div>
                                </Upload>
                            </FormItem>
                        </Col>
                    </div></br>
                    <div v-if="applyForm.type == 2">
                        <Col span="24" class="ws-form-category">
                            <span style="font-size: 20px;">个人信息</span>
                        </Col>
                        <Col span="12">
                            <FormItem label="身份证照片(正)" prop="identifyFront">
                                <!-- <Input v-model="applyForm.identifyFront" class="ws-form-select"></Input> -->
                                <div class="demo-upload-list" v-if="applyForm.identifyFront">
                                    <template>
                                        <img :src="'/ws/img/view/'+applyForm.identifyFront">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleIdentifyFrontView"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="handleIdentifyFrontRemove(applyForm.identifyFront)"></Icon>
                                        </div>
                                    </template>
                                </div>
                                <Upload v-show="!applyForm.identifyFront" ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleIdentifyFrontSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="/ws/batch/upload" style="display: inline-block;width:100px;">
                                    <div style="width: 100px;height:100px;line-height: 100px;">
                                        <Icon type="camera" size="40"></Icon>
                                    </div>
                                </Upload>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="身份证照片(反)" prop="identifyReverse">
                                <!-- <Input v-model="applyForm.identifyReverse" class="ws-form-select"></Input> -->
                                <div class="demo-upload-list" v-if="applyForm.identifyReverse">
                                    <template>
                                        <img :src="'/ws/img/view/'+applyForm.identifyReverse">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleIdentifyReverseView"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="handleIdentifyReverseRemove(applyForm.identifyReverse)"></Icon>
                                        </div>
                                    </template>
                                </div>
                                <Upload v-show="!applyForm.identifyReverse" ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleIdentifyReverseSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="/ws/batch/upload" style="display: inline-block;width:100px;">
                                    <div style="width: 100px;height:100px;line-height: 100px;">
                                        <Icon type="camera" size="40"></Icon>
                                    </div>
                                </Upload>
                            </FormItem>
                        </Col>
                    </div>
                    <Col span="24" class="ws-form-category">
                    <span style="font-size: 20px;">商户信息</span>
                    </Col>
                    <Col span="12">
                    <FormItem label="商户名称" prop="shop">
                        <Input v-model="applyForm.shop" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="店铺LOGO" prop="logo">
                        <!-- <Input v-model="applyForm.logo" class="ws-form-select"></Input> -->
                        <div class="demo-upload-list" v-if="applyForm.logo">
                            <template>
                                <img :src="'/ws/img/view/'+applyForm.logo">
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="handleLogoView"></Icon>
                                    <Icon type="ios-trash-outline" @click.native="handleLogoRemove(applyForm.logo)"></Icon>
                                </div>
                            </template>
                        </div>
                        <Upload v-show="!applyForm.logo" ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleLogoSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="/ws/batch/upload" style="display: inline-block;width:100px;">
                            <div style="width: 100px;height:100px;line-height: 100px;">
                                <Icon type="camera" size="40"></Icon>
                            </div>
                        </Upload>
                    </FormItem>
                    </Col>
                    <Col span="24" class="ws-form-category">
                    <span style="font-size: 20px;">收款账户</span>
                    </Col>
                    <Col span="12">
                    <FormItem label="开户行" prop="bank">
                        <Input v-model="applyForm.bank" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="支行" prop="bankBranch">
                        <Input v-model="applyForm.bankBranch" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="开户人" prop="bankAccountName">
                        <Input v-model="applyForm.bankAccountName" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="银行账号" prop="bankAccount">
                        <Input v-model="applyForm.bankAccount" class="ws-form-select" :disabled="disabled"></Input>
                    </FormItem>
                    </Col>
                    <!--  <FormItem label="显示顺序" prop="orderNum">
                                    <InputNumber :max="100" :min="1" v-model="applyForm.orderNum"></InputNumber>
                                </FormItem> -->
                    <!-- {{applyForm.status}} -->
                    <Col span="24" v-if="(!isEdit) || (isEdit && applyForm.status ==2)">
                    <div class="edit-button-self">
                        <Button type="primary" @click="validateForm">保存</Button>
                        <Button type="primary" @click="validateForm">提交</Button>
                    </div>
                    </Col>
                </Form>
            </row>
            </Col>
        </Row>
        <Modal title="营业执照照片" v-model="visible">
            <img :src="'/ws/img/view/'+applyForm.licenseId" v-if="visible" style="width: 100%">
        </Modal>

        <Modal title="身份证照片(正)" v-model="visibleIdentifyFront">
            <img :src="'/ws/img/view/'+applyForm.identifyFront" v-if="visibleIdentifyFront" style="width: 100%">
        </Modal>

        <Modal title="身份证照片(反)" v-model="visibleIdentifyReverse">
            <img :src="'/ws/img/view/'+applyForm.identifyReverse" v-if="visibleIdentifyReverse" style="width: 100%">
        </Modal>

        <Modal title="店铺Logo" v-model="visibleLogo">
            <img :src="'/ws/img/view/'+applyForm.logo" v-if="visibleLogo" style="width: 100%">
        </Modal>

        <!-- 入驻审核弹框 -->
        <div id="toApplyMask" class="toApplyMask" v-show="toApplyModal.show">
            <div class="toApplyLayerBox">
                <Form ref="toApplyForm" class="ivu-modal" :model="toApplyModal.form" :rules="toApplyModal.validate" :label-width="100">
                    <div class="ws-close" @click="toApplyModalCancle">
                        <Icon type="close"></Icon>
                    </div>
                    <FormItem label="手机号" prop="phone">
                        <Input v-model="toApplyModal.form.phone"></Input>
                    </FormItem>
                    <FormItem label="验证码" prop="dynamicCode">
                        <Row>
                            <Col span="11">
                            <Input v-model="toApplyModal.form.dynamicCode"></Input>
                            </Col>
                            <Col style="margin-left: 2%;" span="11" :class="{btnDisabled:flag}">
                            <a href="javascript:void(0)" id="send" @click="getCode" :disabled="flag">获取验证码</a>
                            </Col>
                        </Row>
                    </FormItem>
                    <div class="btns">
                        <Button type="text" @click="toApplyModalCancle">取消</Button>
                        <Button type="primary" @click="toApplyModalOk">确认</Button>
                    </div>
                </Form>
            </div>
        </div>
        <!-- 查看原因表格 -->
        <div id="applyHistoryMask" class="applyHistoryMask" v-show="applyHistoryModalShow">
            <div class="applyHistoryLayerBox">
                <div class="ivu-modal">
                    <div class="ws-close" @click="applyHistoryModalCancle">
                        <Icon type="close"></Icon>
                    </div>
                    <Table stripe :columns="table.columns" :data="table.data"></Table>
                    <Button class="ws-btn-close" type="primary" @click="applyHistoryModalCancle">关闭</Button>
                </div>
            </div>
        </div>
        <!-- 审核通过后填写缴费相关信息框 -->
        <div id="applySuccessMask" class="applySuccessMask" v-show="applySuccessModal.show">
            <div class="applySuccessLayerBox">
                <Form ref="applySuccessForm" class="ivu-modal" :model="applySuccessModal.form" :rules="applySuccessModal.rules" :label-width="100">
                    <div class="ws-close" @click="applySuccessModalCancle">
                        <Icon type="close"></Icon>
                    </div>
                    <Row>
                        <Col span="24" class="ws-form-category">
                            <span style="font-size: 20px;">华龄收款信息</span>
                        </Col>
                        <Col span = "12">
                            <FormItem label="华龄收款银行">
                                <Input disabled v-model="platformBank.bank"></Input>
                            </FormItem>
                        </Col>
                        <Col span = "12">
                            <FormItem label="华龄收款支行">
                                <Input disabled v-model="platformBank.bankBranch"></Input>
                            </FormItem>
                        </Col>
                        <Col span = "12">
                            <FormItem label="华龄收款账号" >
                                <Input disabled v-model="platformBank.bankAccount"></Input>
                            </FormItem>
                        </Col>
                        <Col span = "12">
                            <FormItem label="华龄收款人">
                                <Input disabled v-model="platformBank.bankAccountName"></Input>
                            </FormItem>
                        </Col>
                        <Col span="24" class="ws-form-category">
                            <span style="font-size: 20px;">商户汇款信息</span>
                        </Col>
                        <Col span = "12">
                            <FormItem label="汇款账户" prop="remittanceBankAccount">
                                <Input v-model="applySuccessModal.form.remittanceBankAccount"></Input>
                            </FormItem>
                        </Col>
                        <Col span = "12">
                            <FormItem label="汇款银行" prop="remittanceBank">
                                <Input v-model="applySuccessModal.form.remittanceBank"></Input>
                            </FormItem>
                        </Col>
                        <Col span = "12">
                            <FormItem label="开户人" prop="remittanceAccountName">
                                <Input v-model="applySuccessModal.form.remittanceAccountName"></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <div class="btns">
                        <Button type="text" @click="applySuccessModalCancle">取消</Button>
                        <Button type="primary" @click="applySuccessModalOk">确认</Button>
                    </div>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
import Util from '../../common/util.js';
import Common from '../../common/common.js';
import $ from 'jquery';
export default {
    name: 'merchantsSettledApp',
    components: {},
    computed: {
        isEdit() {
            var status = !Util.vad.isBlank(this.applyForm.id);
            return status;
        }
    },
    data() {
        return {
            flag: false,
            queryForm: {
                applyRecordId: ''
            },
            licenseExpiryDate: {
                disabledDate (date) {
                    return date && date.valueOf() < Date.now() - 86400000;
                }
            },
            table: {
                columns: [{
                        title: '审核状态',
                        key: 'aduitStatus',
                        width: 160,
                        align: 'center',
                        render: (h, params) => {
                            return h('Tag', {
                                props: {
                                    type: 'border',
                                    color: params.row.aduitStatus === 2 ? 'red' : 'blue'
                                }
                            }, this.checkStatus(params.row.aduitStatus))
                        }
                    },
                    {
                        title: '审核意见',
                        key: 'auditContent',
                        width: 160,
                        align: 'center'
                    },
                    {
                        title: '审核时间',
                        key: 'createDate',
                        width: 160,
                        align: 'center'
                    }
                ],
                data: [],
            },
            disabled: false,
            maxWidth: '',
            toApplyModal: {
                show: false,
                form: {
                    phone: '',
                    dynamicCode: ''
                },
                validate: {
                    phone: [
                        { validator: Common.validatePhoneNumber, trigger: 'blur' }
                    ],
                    dynamicCode: [
                        { required: true, message: '请填写验证码', trigger: 'blur' }
                    ],
                }
            },
            applySuccessModal: {
                show: false,
                form: {
                    id: '',
                    remittanceBankAccount: '',
                    remittanceBank: '',
                    remittanceAccountName: ''
                },
                validate: {
                    remittanceBankAccount: [
                        { required: true, message: '请填写汇款账户', trigger: 'blur' }
                    ],
                    remittanceBank: [
                        { required: true, message: '请填写汇款银行', trigger: 'blur' }
                    ],
                    remittanceAccountName: [
                        { required: true, message: '请填写开户人', trigger: 'blur' }
                    ],

                }
            },
            clock: '',
            nums: 60,
            btn: null,
            applyHistoryModalShow: false,
            //查询条件,手机号
            queryCriteria: {
                secuirtyKey: ''
            },
            //审核步骤条list
            auditStepList: [],
            //编辑的对象
            // applyRecordVO:null,
            // imageUrl:'',//上传图片
            visible: false, //营业执照图片预览状态,默认为false
            visibleIdentifyFront: false,//身份证正面图片预览状态,默认为false
            visibleIdentifyReverse: false,//身份证反面图片预览状态,默认为false
            visibleLogo: false,//店铺logo图片预览状态,默认为false
            applyForm: { //表单对象
                id: null, //id
                company: '', //公司名称
                linkman: '', //联系人姓名
                email: '', //邮箱
                telephone: '', //手机号
                idNumber: '', //身份证
                type: '',//入驻类型
                identifyFront: null,//身份证正面
                identifyReverse: null,//身份证反面
                licenseId: null, //营业执照照片
                shop: '',//商户名称
                logo: null, //店铺LOGO照片
                licenseExpiryDate: null, //营业执照有效期
                creditNumber: '', //信用代码证号
                bank: '', //银行名称
                bankBranch: '', //银行支行名称
                bankAccount: '', //银行账号
                bankAccountName: '', //银行开户人姓名
                deposit: null, //保证金
                status: null
            },
            //平台银行账户
            platformBank:{

            },
            rules: {
                linkman: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' },

                ],
                shop: [
                    { required: true, message: '请输入商户名称', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { validator: Common.validateEmail, trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: Common.validatePhoneNumber, trigger: 'blur' },
                ],
                idNumber: [
                    { required: true, message: '请输入身份证', trigger: 'blur' },
                    { validator: Common.validateIdCard, trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择入驻类型', trigger: 'blur' }
                ],
                bank: [
                    { required: true, message: '请输入银行名称', trigger: 'blur' }
                ],
                bankBranch: [
                    { required: true, message: '请输入银行支行名称', trigger: 'blur' }
                ],
                bankAccount: [
                    { required: true, message: '请输入银行账号', trigger: 'blur' }
                ],
                bankAccountName: [
                    { required: true, message: '请输入银行开户人姓名', trigger: 'blur' }
                ],
                deposit: [
                    { validator: Common.validatePrice, trigger: 'blur', message: '请输入正确格式的保证金(x.xx;x.x;x)' },
                ],

            },


        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.toApplyModal.show = true;
            this.resize();
            //获取当前屏幕最大宽度
            this.maxWidth = $(window).height();
            var self = this;
            $(window).resize(function(event) {
                self.resize();
            });
        },
        resize() {
            if (this.toApplyModal.show || this.applyHistoryModalShow || this.applySuccessModal.show) {
                $("body").css("overflow", "hidden");
            } else {
                $("body").css("overflow", "auto");
            }
        },
        /**
         * 判断状态
         */
        checkStatus(status) {
            if (status == 0) return '新申请';
            if (status == 1) return '商户提交基本资料';
            if (status == 2) return '审核失败';
            if (status == 3) return '审核成功';
            if (status == 4) return '商户缴纳保证金';
            if (status == 5) return '确认保证金到账';
        },
        toApplyModalCancle() {
            window.location.href = Util.loginPath();
        },
        toApplyModalOk() {
            this.$refs['toApplyForm'].validate((valid) => {
                if (valid) {
                    this.checkCode();
                } else {
                    this.$Message.error('请填写表单信息');
                }
            });
        },
        //查询平台银行账户信息
        selectPlatformBank(){
            const _this = this;
            this.axios.get('/ws/api/ms/merchantApplyRecord/getPlatformBank').then(response => {
                var res = response.data;
                var resMeta = res.meta;
                if (0 == resMeta.code) {
                    _this.platformBank = res.data;
                } else {
                    _this.$Message.warning(resMeta.message);
                }
            });
        },
        applySuccessModalCancle() {
            this.applySuccessModal.show = false;
            this.resize();
        },
        applySuccessModalOk() {
            this.applySuccessModal.form.id = this.applyForm.id;
            this.$refs['applySuccessForm'].validate((valid) => {
                if (valid) {
                    this.payDeposit();
                } else {
                    this.$Message.error('请填写表单信息');
                }
            });
        },
        //缴纳保证金
        payDeposit(){
        	const _this = this;
			this.axios.put('/ws/api/ops/merchantaudits/paydeposit', _this.applySuccessModal.form).then(response => {
				let res = response.data;
				if(0 === res.meta.code) {
					_this.$Message.success('缴纳成功');
				} else {
					let message_ = res.meta.message;
					_this.$Message.warning('缴纳失败:' + message_);
				}
				_this.$refs['applySuccessForm'].resetFields();
				_this.applySuccessModal.show = false;
                _this.resize();
				_this.init();
			});
        },
        //获取验证码
        getCode() {
            const _this = this;
            _this.$refs.toApplyForm.validateField('phone', function(valid) {
                if (!valid) {
                    _this.flag = true;
                    _this.axios.get('/ws/api/ms/merchantApplyRecord/code/' + _this.toApplyModal.form.phone).then(function(response) {
                        let res = response.data;
                        if (0 === res.meta.code) {
                            _this.$Message.success(res.meta.message);
                            _this.sendCode($("#send"));
                        } else {
                            _this.flag = false;
                            let message_ = res.meta.message;
                            _this.$Message.warning('获取短信验证码失败');
                        }
                    }, function() {
                         _this.flag = false;
                        _this.$Message.error('获取短信验证码出错');                       
                    });
                }
            });
        },

        sendCode(thisBtn) {
            this.btn = thisBtn;
            this.btn.text(this.nums + ' 秒后可重新获取');
            this.doLoop();
        },
        doLoop() {
            this.nums--;
            if (this.nums > 0) {
                this.btn.text(this.nums + ' 秒后可重新获取');
                this.clock = setTimeout(this.doLoop, 1000);
            } else {
                clearTimeout(this.clock); //清除js定时器
                this.flag = false;
                this.btn.text('点击发送验证码');
                this.nums = 60; //重置时间
            }

        },
        //查看原因页面关闭
        applyHistoryModalCancle() {
            this.applyHistoryModalShow = false;
            this.resize();
        },
        //查看原因
        checkReason() {
            this.applyHistoryModalShow = true;
            this.queryApplyHistory();
        },
        //查询审核历史记录
        queryApplyHistory() {
            this.queryForm.applyRecordId = this.applyForm.id;
            this.axios.post('/ws/api/ms/merchantAuditRecords/condition', this.queryForm).then(response => {
                var res = response.data;
                var resMeta = res.meta;
                if (0 == resMeta.code) {
                    this.table.data = res.data;
                } else {
                    _this.$Message.warning(resMeta.message);
                }
            });
        },
        //校验
        // verification() {
        //     if (Util.vad.isBlank(this.queryCriteria.secuirtyKey)) {
        //         this.$Message.warning('请输入查询码');
        //         return false;
        //     }
        //     return true;
        // },
        //验证码校验
        checkCode() {
            const _this = this;
            this.axios.get('/ws/api/ms/merchantApplyRecord/checkcode/' + this.toApplyModal.form.phone + '/' + this.toApplyModal.form.dynamicCode).then(function(response) {
                let resData = response.data;
                if (0 === resData.meta.code) {
                    if (0 == resData.data.type) {                        
                        _this.$Message.success({
                            content:'你已经入驻电商平台，可以登录进行管理',
                            duration:3,
                            onClose:function(){
                                _this.toApplyModalCancle()
                            }
                        });
                    }
                    //审核进行中
                    if (1 == resData.data.type) {
                        _this.initApplyRecord(resData.data.merchantApplyRecordDO);
                        _this.toApplyModal.show = false;
                        _this.resize();
                        if (2 != resData.data.merchantApplyRecordDO.status) {
                            this.disabled = true;
                        }
                        // _this.$Message.success('查询成功!');
                    }
                    if (2 == resData.data.type) {
                        _this.clearData();
                        _this.toApplyModal.show = false;
                         _this.resize();
                        _this.applyForm.telephone = _this.toApplyModal.form.phone;
                        _this.applyForm.status = 0;
                    }
                    //缴纳保证金弹框
                    if(null != resData.data.merchantApplyRecordDO){
                        if(3 == resData.data.merchantApplyRecordDO.status){
                            _this.selectPlatformBank();
                            _this.applySuccessModal.show = true;
                        }
                    }
                } else {
                    let errorMessage = response.data.meta.message;
                    _this.$Message.warning('校验失败:' + errorMessage);
                }
            });
        },
        //查询结果为空时重置申请记录
        clearData() {
            let data = { //表单对象
                id: null, //id
                company: '', //公司名称
                linkman: '', //联系人姓名
                email: '', //邮箱
                telephone: '', //手机号
                idNumber: '', //身份证
                type: '',//入驻类型
                identifyFront: null,//身份证正面照
                identifyReverse: null,//身份证反面照
                licenseId: null, //营业执照照片
                shop: '',//商户名称
                logo: null, //店铺LOGO照片
                licenseExpiryDate: null, //营业执照有效期
                creditNumber: '', //信用代码证号
                status: null, //1申请中 2申请成功 3申请失败
                bank: '', //银行名称
                bankBranch: '', //银行支行名称
                bankAccount: '', //银行账号
                bankAccountName: '', //银行开户人姓名
                deposit: null, //保证金
                status: null //审核状态
            };
            this.initApplyRecord(data);
            this.auditStepList = [];
        },
        //初始化编辑的申请记录
        initApplyRecord(data) {
            this.applyForm.id = data.id; //id
            this.applyForm.company = data.company; //公司名称
            this.applyForm.linkman = data.linkman; //联系人姓名
            this.applyForm.email = data.email; //邮箱
            this.applyForm.telephone = data.telephone; //手机号
            this.applyForm.shop = data.shop; //商户名称
            this.applyForm.logo = data.logo; //店铺logo
            this.applyForm.idNumber = data.idNumber; //身份证
            this.applyForm.type = data.type.toString();//入驻类型
            this.applyForm.identifyFront = data.identifyFront;//身份证正面照
            this.applyForm.identifyReverse = data.identifyReverse;//身份证反面照
            this.applyForm.licenseId = data.licenseId; //营业执照照片
            if (null != data.licenseExpiryDate) {
                this.applyForm.licenseExpiryDate = new Date(data.licenseExpiryDate); //营业执照有效期  
            }
            this.applyForm.creditNumber = data.creditNumber; //信用代码证号
            this.applyForm.bank = data.bank; //银行名称
            this.applyForm.bankBranch = data.bankBranch; //银行支行名称
            this.applyForm.bankAccount = data.bankAccount; //银行账号
            this.applyForm.bankAccountName = data.bankAccountName; //银行开户人姓名
            this.applyForm.deposit = data.deposit; //保证金
            this.applyForm.status = data.status; //审核状态             
        },
        //校验form表单
        validateForm() {
            this.$refs['applyForm'].validate((valid) => {
                if (valid) {
                    this.submitForm();
                } else {
                    this.$Message.error('表单验证失败!');
                }
            });
        },
        //提交表单
        submitForm() {
            var type = this.checkMessage();
            if(!type){
                return;
            }
            if (this.isEdit) {
                this.editForm();
            } else {
                this.saveForm();
            }
        },
        //验证是否填写必要信息
        checkMessage(){
            if(this.applyForm.type == 2){
                if(null == this.applyForm.identifyFront || '' == this.applyForm.identifyFront){
                    this.$Message.error('请上传身份证正面照!');
                    return false;
                }
                if(null == this.applyForm.identifyReverse || '' == this.applyForm.identifyReverse){
                    this.$Message.error('请上传身份证背面照!');
                    return false;
                }
            }
            if(this.applyForm.type == 1){
                if (null == this.applyForm.licenseId || '' == this.applyForm.licenseId) {
                    this.$Message.warning('请上传营业执照照片');
                    return false;
                }
                if (null == this.applyForm.company || '' == this.applyForm.company) {
                    this.$Message.warning('请填写公司名称');
                    return false;
                }
                if (null == this.applyForm.creditNumber || '' == this.applyForm.creditNumber) {
                    this.$Message.warning('请填写信用代码证号');
                    return false;
                }
                if (null == this.applyForm.licenseExpiryDate || '' == this.applyForm.licenseExpiryDate) {
                    this.$Message.warning('请选择营业执照有效期');
                    return false;
                }
            }
            if(null == this.applyForm.logo || '' == this.applyForm.logo){
                this.$Message.warning('请上传店铺Logo照片');
                return false;
            }
            return true;
        },
        //新增
        saveForm() {
            const _this = this;
            let postData_ = this.applyForm;
            this.axios.post('/ws/api/ms/merchantApplyRecord', postData_).then(function(response) {
                let res = response.data;
                if (0 === res.meta.code) {
                    if (null != res.data) {
                        _this.queryCriteria.secuirtyKey = res.data.secuirtyKey;
                        _this.init();
                    }
                    _this.$Message.success('提交申请成功');
                    // _this.$Modal.info({ title: '提交申请成功', content: '提交申请成功,我们已将查询码发送至您的手机,请根据查询码查询申请进度!' });
                    // _this.query();
                } else {
                    let message_ = res.meta.message;
                    _this.$Message.warning('新增失败:' + message_);
                }
            });
        },
        //编辑
        editForm() {
            const _this = this;
            let postData_ = this.applyForm;
            this.axios.put('/ws/api/ms/merchantApplyRecord', postData_).then(function(response) {
                let res = response.data;
                if (0 === res.meta.code) {
                    _this.$Message.success('修改申请成功');
                    // _this.$Modal.info({ title: '修改申请成功', content: '修改申请成功,我们已将查询码发送至您的手机,请根据查询码查询申请进度!' });
                    _this.init();
                } else {
                    let message_ = res.meta.message;
                    _this.$Message.warning('修改失败:' + message_);
                }
            });
        },
        //营业执照照片
        handleRemove(file) {
            this.applyForm.licenseId = null;
        },
        handleSuccess(res, file) {
            if (res.meta.code == 0) {
                this.applyForm.licenseId = res.data.fileList[0].fileId;
            } else if (res.meta.code == 1) {
                this.$Message.error(res.meta.message);
            } else {
                this.$Message.error("上传失败");
            }
        },
        handleView() {
            this.visible = true;
        },
        //身份证正面
        handleIdentifyFrontRemove(file) {
            this.applyForm.identifyFront = null;
        },
        handleIdentifyFrontSuccess(res, file) {
            if (res.meta.code == 0) {
                this.applyForm.identifyFront = res.data.fileList[0].fileId;
            } else if (res.meta.code == 1) {
                this.$Message.error(res.meta.message);
            } else {
                this.$Message.error("上传失败");
            }
        },
        handleIdentifyFrontView(){
            this.visibleIdentifyFront = true;
        },
        //身份证反面
        handleIdentifyReverseRemove(file) {
            this.applyForm.identifyReverse = null;
        },
        handleIdentifyReverseSuccess(res, file) {
            if (res.meta.code == 0) {
                this.applyForm.identifyReverse = res.data.fileList[0].fileId;
            } else if (res.meta.code == 1) {
                this.$Message.error(res.meta.message);
            } else {
                this.$Message.error("上传失败");
            }
        },
        handleIdentifyReverseView(){
            this.visibleIdentifyReverse = true;
        },
        //logo图片
        handleLogoRemove(file) {
            this.applyForm.logo = null;
        },
        handleLogoSuccess(res, file) {
            if (res.meta.code == 0) {
                this.applyForm.logo = res.data.fileList[0].fileId;
            } else if (res.meta.code == 1) {
                this.$Message.error(res.meta.message);
            } else {
                this.$Message.error("上传失败");
            }
        },
        handleLogoView(){
            this.visibleLogo = true;
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },

    }
}
</script>
<style scoped>
.btnDisabled {
    cursor: not-allowed!important;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.clearfix {
    *+height: 1%;
}

#toApplyMask,
#applyHistoryMask,
#applySuccessMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    z-index: 99;
}

#toApplyMask .toApplyLayerBox,
#applyHistoryMask .applyHistoryLayerBox,
#applySuccessMask .applySuccessLayerBox {
    position: fixed;
    top: 0;
    left: 20%;
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

#toApplyMask .toApplyLayerBox .ivu-modal .ws-close,
#applyHistoryMask .applyHistoryLayerBox .ivu-modal .ws-close,
#applySuccessMask .applySuccessLayerBox .ivu-modal .ws-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
}

#toApplyMask .toApplyLayerBox .ivu-modal,
#applySuccessMask .applySuccessLayerBox .ivu-modal {
    top: 0;
    background: #fff;
    padding: 80px 100px 80px 50px;
    min-width: 460px;
    box-shadow: 0 0 25px 1px #959595;
}

#applyHistoryMask .applyHistoryLayerBox .ivu-modal {
    width: 540px;
    top: 0;
    background: #fff;
    padding: 80px 30px;
    min-width: 540px;
    box-shadow: 0 0 25px 1px #959595;
}

#toApplyMask .toApplyLayerBox .ivu-modal .btns,
#applySuccessMask .applySuccessLayerBox .ivu-modal .btns {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

#applyHistoryMask .applyHistoryLayerBox .ivu-modal .ws-btn-close {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

#merchantsSettledDiv {
    width: 70%;
    margin: 40px auto;
    min-width: 960px;
    padding: 0 40px;
}

#merchantsSettledDiv .ws-form-category {
    padding: 0 0 5px 10px;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #e9eaec;
}

.demo-upload-list {
    display: inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}

#merchantsSettledDiv .edit-button-self {
    text-align: center;
    margin-top: 30px;
}

#merchantsSettledDiv .edit-button-self button+button {
    margin-left: 50px;
}

#merchantsSettledDiv .ws-form-header {
    margin: 0 auto 20px;
    color: #333;
    text-align: center;
}

#merchantsSettledDiv .ws-form-header .ws-status-box {
    width: 450px;
    display: inline-block;
    font-size: 20px;
    text-align: left;
    margin-left: 350px;
}

#merchantsSettledDiv .ws-form-header .ws-status-box .link-reason {
    margin-left: 30px;
}
</style>